<template>
  <div id="main">
    <Sidebar />
    <div id="content">
      <div class="panel">
        <div class="header">
          <ul class="breadcrumb">
            <li><a href="/">主页</a><span class="divider">/</span></li>
          </ul>
        </div>
        <div class="inner userinfo">
          <div class="user_big_avatar">
            <img :src="nums.avatar_url" class="user_avatar" :title="nums.loginname">
          </div>
          <a class="dark" v-show="nums.loginname !== undefined">{{nums.loginname}}</a>
          <div class="user_profile">
            <ul class="unstyled">
              <span class="big">{{nums.score}}</span> 积分
              <li v-show="rootNum.success === true">
                <a class="dark" href="/user/linshuai/collections" target="_blank">
                  <span class="big collect-topic-count">2</span>话题收藏
                </a>
              </li>
              <li>
                <i class="fa fa-lg fa-fw fa-github"></i>
                <a class="dark" :href="'https://github.com/'+nums.loginname" target="_blank">
                  @{{nums.loginname}}
                </a>
              </li>
            </ul>
          </div>
          <p class="col_fade">注册时间 5个月前</p>
        </div>
      </div>
      <div class="panel" v-if="nums.recent_topics !== undefined">
        <div class="header">
          <span class="col_fade">最近创建的话题</span>
        </div>
        <div class="cell" v-for="(item,index) in nums.recent_topics" :key="index">
          <a class="user_avatar pull-left" :href="'/user/'+item.author.loginname">
            <img :src="item.author.avatar_url" :title="item.author.loginname">
          </a><span class="reply_count pull-left"><span class="count_of_replies" title="回复数">0</span><span class="count_seperator">/</span><span class="count_of_visits" title="点击数">69</span></span>
          <span class="last_time pull-right"><span class="last_active_time">{{getTime(item.last_reply_at,item.create_at)}}</span></span>
          <div class="topic_title_wrapper">
            <a class="topic_title" :href="'/topic/'+item.id" :title="item.title">
             {{item.title}}
            </a>
          </div>
        </div>
      </div>
      <div class="panel" v-if="nums.recent_replies !== undefined">
        <div class="header">
          <span class="col_fade">最近参与的话题</span>
        </div>
        <div class="cell" v-for="(item,index) in nums.recent_replies" :key="index">
          <a class="user_avatar pull-left" :href="'/user/'+item.author.loginname">
            <img :src="item.author.avatar_url" :title="item.author.loginname">
          </a>
          <span class="reply_count pull-left"><span class="count_of_replies" title="回复数">1</span><span class="count_seperator">/</span><span class="count_of_visits" title="点击数">93</span></span>
          <a class="last_time pull-right" href="/topic/5d750816100d08b25c0c7302#5d7654856228b5935d201da8">
            <img class="user_small_avatar" :src="item.author.avatar_url"><span class="last_active_time">20小时前</span>
          </a>
          <div class="topic_title_wrapper">
            <a class="topic_title" :href="'/topic/'+item.id" :title="item.title">
              {{item.title}}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {UserInfo, AccessToken} from './uitls/Api'
import TimeFormat from './uitls/Tools'
import Sidebar from './components/Sidebar'
export default {
  name: 'UserInfo',
  data () {
    return {
      nums: {},
      accessToken: '16cc0a71-db32-4988-987c-650f618d9074',
      rootNum: {}
    }
  },
  components: {
    Sidebar
  },
  methods: {
    getAxios () {
      console.log(this.$route.params.loginname)
      //获取路由路径参数
      UserInfo(this.$route.params.loginname).then((res) => {
        console.log(res)
        this.nums = res.data
      }).catch(res => {
      })
    },
    getTime (fasttime, lasttime) {
      return TimeFormat(fasttime, lasttime)
    },
    getAccessToken () {
      AccessToken(this.accessToken).then((res) => {
        console.log(res)
        this.rootNum = res
      })
    }
  },
  mounted () {
    this.getAxios()
    this.getAccessToken()
  }
}
</script>

<style scoped>

</style>
